<template>
    <div class="remark" style="height: 100%; background: #FFFFFF   ">
        <div class="head_top">
            <div>
                <div class="img-kuang">

                    <img  :src=$route.query.img_url onerror="javascript:this.src='../assets/images/daiti.png'" alt="">
                </div>
                <div class="box-rigth">
                    <span class="pinName">{{$route.query.brand_name}}</span>
                    <span class="vin">VIN:{{$route.query.vin |istext}}</span>
                </div>
            </div>
        </div>
        <div class="textarea">
            <textarea id="area" v-model="remarks" placeholder="请输入备注内容（100字以内）" maxlength="100"></textarea>
        </div>
        <p style="text-align: right;padding-right: 15px;margin-top: 10px;font-size: 0.875rem;color: #333;">
            已输入<span id="text-count">{{remarkLength}}</span>/100
        </p>
        <div class="btn-find" style="margin: 0;margin-top: 46px;padding: 0 10px; width: 100%;">
            <button id="bayBtn" @click="sfe()" style="width: 100%">
                保存
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'remark',
        data() {
            return {
//                remark :this.$route.query.remark,
                remarks:"",
                remarkLength:''
            }
        },
        methods:{
          sfe(){
              console.log(this.$route.query.brand_id)
              this.$http.post('http://api.mayinvwang.com/index.php/User/setRemark',
                  {
                      query_id: this.$route.query.id,
                      remark: this.remarks
              }).then(
                  (res)=>{
                      console.log(res.data);
                      this.$router.push({name:'report',params:{sussecc:1}});
                      this.$layer.msg('修改成功')
                  },
                  ()=>{}
              )
          }
        },
        computed:{


        },
        watch:{
            remarks:function ( val ,oldVal) {
                console.log(val ,oldVal)
               this.remarkLength= this.remarks.length;
                if(this.remarks.length>=100){
                    console.log(11);
//                    this.remarks=val;
//                    this.remarks.length=this.remarkLength;
                }
            }
        },
        filters: {
            istext(value) {
                if (value.lastIndexOf(".") != -1) {
                    return '上传图片查询'
                } else {
                    return 'VIN:' + value
                }
            }
        },
        created(){
            this.remarkLength=this.$route.query.remark.length;
            this.remarks=this.$route.query.remark;
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  @import "../assets/css/remark.css";
</style>
